<template>
	<view class="staff-list-card b-box last" style="margin-bottom: 20rpx;">
		<!-- 师傅  主页  列表卡片 -->
		<view
			class="bg-ff b-box "
			style="border-radius: 16rpx;min-height: 420rpx;width: 702rpx;padding: 28rpx 32rpx 0"
		>
			<!--  -->
			<view
				class="w-100 b-box d-flex flex-r ali-i-c just-s"
				style="margin-bottom: 28rpx;"
				v-if="staffList"
			>
				<view
					style="width:80rpx ;height:80rpx;margin-right: 20rpx;border-radius: 50%;overflow: hidden;"
					class="b-box"
				>
					<image :src="staffList.userinfo.avatar" style="width:80rpx ;height:80rpx"></image>
				</view>
				<!--  -->
				<view style="width: 600rpx;height: 86rpx;" class="b-box d-flex flex-c ali-i-s just-sw">
					<view class="d-flex flex-r ali-i-c just-sw b-box po-re" style="top:-4rpx;width: 100%;">
						<text class="fw-500 pf-sc c-333 fz-32 d-flex">{{ staffList.userinfo.nickname }}</text>
	<!-- 					<text class="fw-400 pf-sc d-flex" style="color: #FF5C00;font-size: 26rpx">
						剩余时间{{time}}
						</text> -->
					</view>
					<view class="d-flex flex-r ali-i-c  b-box po-re" style="top: 4rpx;width: 100%;justify-content: space-between;" >
						<view class="pf-sc fw-400" style="font-size: 26rpx;color: #666666;">距您{{staffList.distances ? staffList.distances : 0}}km</view>
						<view class="pf-sc fw-400" style="font-size: 20rpx;color: #666666;margin: 0 5rpx;">
							|
						</view>
						<view class="pf-sc fw-400" style="font-size: 26rpx;color: #666666;">
							服务时间{{ fwtime }}
						</view>
					</view>
				</view>
			</view>
			<!--  -->
			<view
				style="min-height: 146rpx;padding-bottom: 26rpx;border-bottom: 2rpx solid #eeeeee;"
				class=" b-box d-flex flex-r ali-i-c just-s"
			>
				<view
					style="width:140rpx ;height:140rpx;margin-right: 16rpx;border-radius:16rpx;overflow: hidden;"
					class="b-box"
				>
					<image :src="staffList.catimage" style="width:140rpx ;height:140rpx"></image>
				</view>
				<!--  -->
				<view style="width: 490rpx;height: 140rpx;" class="b-box d-flex flex-c ali-i-s just-sw">
					<view class="d-flex b-box w-100" style="width: 500rpx;justify-content: space-between;">
						<view class="fw-500 pf-sc c-333 fz-32">{{ staffList.catname }}</view>
						<view
							class="fw-400 pf-sc"
							style="color: #26387C;font-size: 28rpx;margin-right: 16rpx;"
							v-if="staffList.isorder == 2"
						>
							已拒接 
						</view>
					</view>
					

					
					<view class="d-flex flex-c ali-i-s just-sw b-box" style="display: flex;justify-content: space-between;">
            
						
						 <view style="display: flex;justify-content: space-between;">
							 
							 
             	<view class="pf-sc fw-400" style="font-size: 26rpx;color: #666666;margin-bottom: 8rpx;width: 130rpx;">车辆停靠：</view>
             	<view class="pf-sc fw-400" style="font-size: 26rpx;color: #666666;margin-bottom: 8rpx;width: 358rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
             		{{ staffList.cardesc }}
             	</view>
             </view>
						<view class="pf-sc fw-400" style="width: 500rpx; font-size: 26rpx;color: #666666;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
							客户备注：{{ staffList.remarks }}
						</view>
						
						
					</view>
				</view>
			</view>
			<!-- btn -->
			<view style="height: 98rpx;margin-top: 5rpx;" class="b-box d-flex flex-r ali-i-c just-sw">
				<view class="b-box d-flex flex-r ali-i-c just-s" style="max-width:280rpx ;">
					<text class="fw-400 c-333 pf-sc" style="font-size: 28rpx;">实付：</text>
					<view class="b-box d-flex flex-r ali-i-c just-s">
						<text class="pf-sc fw-500 po-re" style="font-size: 30rpx;color: #FF5C00;">
							¥
						</text>
						<text class="pf-sc fw-600" style="font-size: 28rpx;color: #FF5C00;">
							{{ staffList.money }}
						</text>
					</view>
				</view>
				<view class="b-box" v-if="staffList.type === 0">
					<u-button
						:throttleTime="700"
						@click="GrabOrders"
						:customStyle="{
							height: '68rpx',
							width: '170rpx',
							font: '500 28rpx PingFang SC',
							color: '#ffffff',
							borderWidth: '0rpx',
							background: 'linear-gradient(180deg, #4885C5 0%, #3B52A6 100%)',
							borderRadius: '44rpx'
						}"
						shape="square"
						text="抢单"
					></u-button>
				</view>
				<view
					class="b-box d-flex flex-r ali-i-c just-sw"
					style=""
					v-if="staffList.isorder != 2"
				>
					<u-button
					v-if="TabCurrent==2"
						:throttleTime="700"
						@click="Refuse"
						color="#2F4081"
						plain
						:customStyle="{
							height: '68rpx',
							width: '170rpx',
							font: '500 28rpx PingFang SC',
							borderRadius: '44rpx'
						}"
						shape="square"
						text="拒接"
					></u-button>
				
					<u-button
						:throttleTime="700"
						@click="GrabOrders"
						:customStyle="{
							height: '68rpx',
							width: '170rpx',  
							font: '500 28rpx PingFang SC',
							color: '#ffffff',
							borderWidth: '0rpx',
							background: 'linear-gradient(180deg, #4885C5 0%, #3B52A6 100%)',
							borderRadius: '44rpx',
							marginLeft:'10px' 
						}"
						shape="square"
						:text="TabCurrent+1==3?'接单':'抢单'"
					></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'staff-list-card',
	props: {
		staffList: {
			type: Object
		},
		TabCurrent:{
			type:Number
		}
	},
	data() {
		return {
			time: '',
			fwtime:''
		};
	},
	mounted() {
		console.log(this.staffList,'this.staffList');
		setInterval(()=> {
			this.getTimes()
		}, 1000);
		this.fwTime()
	},
	methods: {
		GrabOrders() {
			//抢单
			this.$emit('GrabOrders', this.staffList);
		},
		Refuse() {
			//拒接
			this.$emit('Refuse', this.staffList);
		},
		
		getTimes() {
			let a = new Date();
			let aa = parseInt(a.getTime() / 1000);
			let aaa = this.staffList.servertime;
			let times = aaa - aa;
			let shi = parseInt(times / 3600);
			let fen = parseInt((times % 3600) / 60);
			let miao = (times % 3600) % 60;
			this.time=`${shi}时:${fen}分:${miao}:秒`
			if (times > 0) {
				//倒计时的秒数递减1
				times = times - 1;
				this.time=`${shi>10 ? shi : '0'+shi}时:${fen>10 ? fen : '0'+fen}分:${miao >10 ? miao : '0'+miao}:秒`
			}
		},
		fwTime(){
			let times = this.staffList.servertime;
			

			  if (times === 0 || times == null) {
			    return ''
			  } else {
			    var date = new Date(times * 1000)
			    var Y = date.getFullYear() + '-'
			    var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
			    var D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' '
			    var H = date.getHours() + ':'
			    var M2 = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
			    var S = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
			    console.log(Y + M + D + H + M2 + S);
					this.fwtime=Y + M + D + H + M2 + S
			  }
		},
	}
};
</script>

<style lang="scss">
.staff-list-card {
}
.last:last-child {
	padding-bottom: 10rpx;
}
</style>
